<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		img {
			border: none;
		}
		.mod-slider {
			width: 1920px;
			position: relative;
			margin: 60px auto;
		}
		
		.slider-main {
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}
		
		.slider-content {
			position: relative;
			font-size: 0;
			overflow: hidden;
			white-space: nowrap;
		}
		
		.slider-content>li {
			display: inline-block;
		}
		
		.slider-content a {
			display: inline-block;
			*display: block;
			*zoom: 1;
		}
		/*<!--点点索引-->*/
		
		.slider-nav {
			background-color: rgba(0, 0, 0, .4);
			width: 100%;
			position: absolute;
			height: 60px;
			bottom: 0;
			white-space: nowrap;
			text-align: center;
			font-size: 0;
		}
		
		.slider-nav>.slider-item {
			position: relative;
			width: 20px;
			height: 20px;
			margin: -10px 5px;
			top: 50%;
			background-color: rgba(255, 255, 255, .6);
			border-radius: 50%;
			display: inline-block;
			*display: block;
			*zoom: 1;
			cursor: pointer;
		}
		
		.slider-item.active {
			background-color: rgba(255, 255, 255, 1);
		}
		/*左右箭头*/
		
		.slider-page {
			position: absolute;
			width: 100%;
			top: 50%;
			margin-top: -30px;
			/*height: 60px;*/
		}
		
		.slider-page>[class*="slider-"] {
			position: absolute;
			width: 60px;
			height: 60px;
			background-color: rgba(0, 0, 0, .3);
			font-size: 60px;
			line-height: 60px;
			font-style: normal;
			color: #fff;
		}
		.slider-pre {
			left: 0;
		}
		.slider-next {
			right: 0;
		}
	</style>

	<body>
		<div class="mod-slider">
			<!--放置图片-->
			<ul class="slider-main">
				<div class="slider-content">
					<!--<li class="first-item"><a href="javascript:;"><img src="img/static/about-img_03.png" alt="" /></a></li>-->
					<li class="normal-item">
						<a href="javascript:;"><img src="img/static/about-img_00.png" alt="" /></a>
					</li>
					<li class="normal-item">
						<a href="javascript:;"><img src="img/static/about-img_01.png" alt="" /></a>
					</li>
					<li class="normal-item">
						<a href="javascript:;"><img src="img/static/about-img_02.png" alt="" /></a>
					</li>
					<li class="normal-item">
						<a href="javascript:;"><img src="img/static/about-img_03.png" alt="" /></a>
					</li>
					<!--<li class="last-item"><a href="javascript:;"><img src="img/static/about-img_00.png" alt="" /></a></li>-->
				</div>
			</ul>
			<!--点点索引-->
			<!--<ul class="slider-nav">
				<li class="slider-item active" data-index="0"></li>
				<li class="slider-item" data-index="1"></li>
				<li class="slider-item" data-index="2"></li>
				<li class="slider-item" data-index="3"></li>
			</ul>-->
			<!--左右箭头 -->
			<div class="slider-page">
				<a class="slider-pre" href="javascript:;">&lt;</a>
				<a class="slider-next" href="javascript:;">&gt;</a>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				"arr": ["img/static/about_img-00.png", "img/static/about-img_01.png", "img/static/about-img_02.png", "img/static/about-img_03.png", "img/static/about-img_04.png"]
			}

			function Slider() {
				this.itemIndex = 0; //索引位置 必传
				this.sliderMain = document.querySelector(".slider-main");
				this.sliderContent = document.querySelector(".slider-content"); //
				this.sliderPage = document.querySelector(".slider-page"); //左右导航
				this.slidernav = null; //点点导航
				this.movewidth = this.sliderMain.offsetWidth; //移动的长度
				this.itemLength = this.sliderContent.querySelectorAll(".normal-item").length; //索引长度 
				this.openPage = true; //开左右导航
				this.openNav = true; //开点点导航
				this.sliderActive = true; //slider运行开关
				this.timer = null; //定时器
				this.autoplay = true; //默认自动轮播
				this.timeDelay = 3000; //设置轮播时间间隔
			}
			Slider.prototype.init = function(config) {
				if(config) {
					this.openPage = typeof config.openPage == "boolean" ? config.openPage : true;
					this.openNav = typeof config.openNav == "boolean" ? config.openNav : true;
					this.autoplay = typeof config.autoplay == "boolean" ? config.autoplay : true;
					this.timeDelay = typeof config.timeDelay == "number" ? config.timeDelay : 3000;
				}
				//设置容器的长度
				this.sliderContent.style.width = (this.itemLength + 2) * this.movewidth + "px";

				/*加入前后2个特殊的item*/
				var lastItem = this.sliderContent.querySelector(".normal-item").cloneNode(true);
				lastItem.className = "last-item";
				this.sliderContent.appendChild(lastItem);
				var firstItem = this.sliderContent.querySelectorAll(".normal-item")[this.itemLength - 1].cloneNode(true);
				firstItem.className = "first-item";
				this.sliderContent.insertBefore(firstItem, this.sliderContent.childNodes[0]);

				/*加入点点导航*/
				if(this.openNav) {
					var NavStr = '<ul class="slider-nav">'
					for(var i = 0; i < this.itemLength; i++) {
						if(i == 0)
							NavStr += '<li class="slider-item active" data-index="' + i + '"></li>';
						else
							NavStr += '<li class="slider-item" data-index="' + i + '"></li>';
					}
					NavStr += '</ul>';
					this.sliderMain.insertAdjacentHTML("afterEnd", NavStr);
					this.slidernav = document.querySelector(".slider-nav"); //点点导航
					//设置点点导航
					this.toIndexItem(this.itemIndex);
				}
				/*自动轮播*/
				if(this.autoplay)
					this.autoPlay();
				/*加如事件*/
				this.addEvent();
			}
			Slider.prototype.autoPlay = function() {
				var _this = this;
				this.timer = setInterval(function() {
					_this.toIndexItem(_this.itemIndex + 1);
				}, _this.timeDelay);
			}
			Slider.prototype.toIndexItem = function(num) {
				if(this.sliderActive) {
					this.sliderActive = false; //关掉开关
					var _this = this;
					setTimeout(function() {
						_this.sliderActive = true;
					}, 1000)
					num = parseInt(num);
					if(num < 0) {
						this.sliderContent.style.transition = "transform 1s ease-in-out";
						this.sliderContent.style.transform = "translate3d(0px, 0px, 0px)";
						this.itemIndex = this.itemLength - 1;
						setTimeout(function() {
							_this.sliderContent.style.transition = "none";
							_this.sliderContent.style.transform = "translate3d(-" + _this.movewidth * _this.itemLength + "px, 0px, 0px)";
						}, 1000)
					} else if(num >= this.itemLength) {
						this.sliderContent.style.transition = "transform 1s ease-in-out";
						this.sliderContent.style.transform = "translate3d(-" + this.movewidth * (this.itemLength + 1) + "px, 0px, 0px)";
						this.itemIndex = 0;
						setTimeout(function() {
							_this.sliderContent.style.transition = "none";
							_this.sliderContent.style.transform = "translate3d(-" + _this.movewidth + "px, 0px, 0px)";
						}, 1000)
					} else {
						this.sliderContent.style.transition = "transform 1s ease-in-out";
						this.sliderContent.style.transform = "translate3d(-" + this.movewidth * (num + 1) + "px, 0px, 0px)";
						this.itemIndex = num;
					}
					this.toIndexPoint(this.itemIndex);
				}
			}
			Slider.prototype.addEvent = function() {
				/*左右点击切换*/
				var _this = this;
				this.sliderPage.addEventListener("click", function(ev) {
					var ev = ev || window.event;
					var target = ev.target || ev.srcElement; //兼容ie
					if(target.className.indexOf("slider-pre") > -1)
						_this.toIndexItem(_this.itemIndex - 1)
					if(target.className.indexOf("slider-next") > -1)
						_this.toIndexItem(_this.itemIndex + 1)
				})
				/*点点切换*/
				if(this.openNav) {
					this.slidernav.addEventListener("click", function(ev) {
						var ev = ev || window.event;
						var target = ev.target || ev.srcElement; //兼容ie
						if(target.nodeName.toLowerCase() == "li") {
							if(target.className.indexOf("active") == -1) {
								_this.toIndexPoint(target.getAttribute("data-index"));
								_this.toIndexItem(target.getAttribute("data-index"));
							}
						}
					})
				}
				/*移入暂停 ，移除继续*/
				this.sliderMain.addEventListener("mouseover", function() {
					clearInterval(_this.timer);
				})
				this.sliderMain.addEventListener("mouseleave", function() {
					if(_this.autoplay)
						_this.autoPlay();
				})
			}
			Slider.prototype.toIndexPoint = function(num) {
				num = parseInt(num);
				if(this.openNav) {
					var target = this.slidernav.querySelectorAll(".slider-item")[num];
					var oldclass = target.parentNode.querySelector(".active").className;
					target.parentNode.querySelector(".active").className = oldclass.replace("active", "");
					target.className = target.className.replace(/\s$/, "") + " active";
				}
			}
			
			/*new 一个轮播组件*/
			var slider = new Slider();
			slider.init({
				autoplay: true
			});
		</script>
	</body>

</html>